<script setup lang="ts">
import {servicesInfoReq} from "@/api/asset";
import {reactive, ref} from "vue";
import type {VxeGridInstance, VxeGridProps} from "vxe-table";

const xGrid = ref<VxeGridInstance>();
const gridOptions = reactive<VxeGridProps>({
    border:true,
    showHeaderOverflow:true,//当表头内容过长时显示为省略号
    showOverflow:true,//当内容过长时显示为省略号
    keepSource:true,
    id:'vulnerability',
    height:600,
    rowConfig:{
        keyField:'id',
        isHover:true
    },
    columnConfig:{
        resizable:true//启用列宽调整
    },
    customConfig:{
        storage:true,
        // checkMethod({ column }){
        //     return !['nickname', 'role'].includes(column.field);
        // }
    },
    sortConfig:{
        trigger:'cell',
        remote:true
    },
    filterConfig:{
        remote:true
    },
    pagerConfig:{
        pageSize:10,
        pageSizes:[5,10,15,20,50]
    },
    formConfig:{
        titleWidth:100,
        titleAlign:'center',
        items:[
            {
                field:'name',
                title:'服务名称',
                span:8,
                itemRender:{name:'$input',props:{placeholder:'请输入查询的服务名称'}}
            },
            {
                field:'port',
                title:'通信端口',
                span:8,
                itemRender:{name:'$input',props:{placeholder:'请输入查询的通信端口'}}
            }
        ]
    },
    toolbarConfig:{
        refresh:true
    },
    proxyConfig:{
        seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
        sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
        filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
        form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
        // 对应响应结果 { result: [], page: { total: 100 } }
        props: {
            result: 'serviceList', // 配置响应结果列表字段
            total: 'page.total' // 配置响应结果总页数字段
        },
        ajax:{
            query:async ({page,sorts,filters,form})=>{
                const queryParams = Object.assign({},form)
                const firstSort = sorts[0]
                if (firstSort){
                    queryParams.sort = firstSort.field//排序字段
                    queryParams.order = firstSort.order//排序顺序
                }
                filters.forEach(({field,values})=>{
                    queryParams[field] = values.join(',')
                })
                // console.log(queryParams)
                const response = await servicesInfoReq({'currentPage':page.currentPage,'pageSize':page.pageSize,
                    'name':queryParams.name,'port':queryParams.port})
                // eslint-disable-next-line no-return-await
                return response.data
            }
        }
    },
    columns:[
        {
            type:'seq',
            title:'序号',
            width:'5%',
            align:'center'
        },
        {
            field:'id',
            title:'ID',
            width:'10%',
            align:'center',
        },
        {
            field:'name',
            title:"服务名称",
            width:'10%',
            align:'center',
        },
        {
            field:'port',
            title:"通信端口",
            width:'10%',
            align:'center',
        },
        {
            field:'deployNum',
            title:'部署主机数量',
            width:'10%',
            align:'center',
            sortable:true
        },
        {
            align:'center',
            slots:{
                default: 'button'
            }
        }
    ]
})
const clickDetail = (data)=>{
    console.log(data)
}
</script>

<template>
    <vxe-grid ref="xGrid" v-bind="gridOptions">
        <template #button="{row}">
            <el-button type="primary" @click="clickDetail(row)">查看详情</el-button>
        </template>
    </vxe-grid>
</template>

<style scoped>

</style>